Advanced usage examples of the bootstrap-fileinput plugin.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
overwriteInitial
set to false
. So the initial preview is always displayed when additional files are overwritten (useful for multiple upload) scenario. Check how the initial preview config can allow file thumbnails to include actions for delete and download (via the delete url (url
) and the download url (downloadUrl
). The file name for download is automatically displayed as the caption setting. <label for="input-24">Planets and Satellites</label> <div class="file-loading"> <input id="input-24" name="input24[]" type="file" multiple> </div> <script> $(document).ready(function() { var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg', url2 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'; $("#input-24").fileinput({ initialPreview: [url1, url2], initialPreviewAsData: true, initialPreviewConfig: [ {caption: "Moon.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1}, {caption: "Earth.jpg", downloadUrl: url2, size: 1218822, width: "120px", key: 2} ], deleteUrl: "/site/file-delete", overwriteInitial: false, maxFileSize: 100, initialCaption: "The Moon and the Earth" }); }); </script>
overwriteInitial
set to true
that will overwrite files in the initial preview on selection. This scenario shows how you can set a different file name than the caption for your file actions. <label for="input-25">Planets and Satellites</label> <div class="file-loading"> <input id="input-25" name="input25[]" type="file" multiple> </div> <script> $(document).ready(function() { var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg', url2 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'; $("#input-25").fileinput({ initialPreview: [url1, url2], initialPreviewAsData: true, initialPreviewConfig: [ {caption: "Moon.jpg", filename: "MoonFull.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1}, {caption: "Earth.jpg", filename: "EarthFull.jpg", downloadUrl: url2, size: 1218822, width: "120px", key: 2} ], deleteUrl: "/site/file-delete", overwriteInitial: true, maxFileSize: 100, initialCaption: "The Moon and the Earth" }); }); </script>
<div class="file-loading"> <input id="input-20" type="file"> </div> <script> $(document).ready(function() { $("#input-20").fileinput({ browseClass: "btn btn-primary btn-block", showCaption: false, showRemove: false, showUpload: false }); }); </script>
<div class="file-loading"> <input id="input-21" type="file" accept="image/*"> </div> <script> $(document).ready(function() { $("#input-21").fileinput({ previewFileType: "image", browseClass: "btn btn-success", browseLabel: "Pick Image", browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ", removeClass: "btn btn-danger", removeLabel: "Delete", removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ", uploadClass: "btn btn-info", uploadLabel: "Upload", uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> " }); }); </script>
<div class="file-loading"> <input id="input-22" name="input22[]" type="file" accept="text/plain" multiple> </div> <script> $(document).ready(function() { $("#input-22").fileinput({ previewFileType: "text", allowedFileExtensions: ["txt", "md", "ini", "text"], previewClass: "bg-warning" }); }); </script>
<div class="file-loading"> <input id="input-23" name="input23[]" type="file" multiple> </div> <script> $(document).ready(function() { $("#input-23").fileinput({ showUpload: false, layoutTemplates: { main1: "{preview}\n" + "<div class=\'input-group {class}\'>\n" + " <div class=\'input-group-btn\ input-group-prepend'>\n" + " {browse}\n" + " {upload}\n" + " {remove}\n" + " </div>\n" + " {caption}\n" + "</div>" } }); }); </script>
<div class="file-loading"> <input id="input-40" name="input40[]" type="file" class="file" multiple> </div> <br> <button type="button" class="btn btn-warning btn-modify">Modify</button> <script> $(document).ready(function() { $(".btn-modify").on("click", function() { var $btn = $(this), $input = $("#input-40"); if ($btn.text() == "Modify") { $("#input-40").fileinput("disable").fileinput("refresh", {showUpload: false}); $btn.html("Revert"); alert("Hurray! I have disabled the input and hidden the upload button."); } else { $("#input-40").fileinput("enable").fileinput("refresh", {showUpload: true}); $btn.html("Modify"); alert("Hurray! I have reverted back the input to enabled with the upload button."); } }); }); </script>
fileTypeSettings
. <div class="file-loading"> <input id="input-41" name="input41[]" type="file" multiple> </div> <script> $(document).ready(function() { $("#input-41").fileinput({ maxFileCount: 10, allowedFileTypes: ["image", "video"] }); }); </script>
<div class="file-loading"> <input id="input-42" name="input42[]" type="file" multiple> </div> <script> $(document).ready(function() { $("#input-42").fileinput({ maxFileCount: 10, allowedFileExtensions: ["jpg", "gif", "png", "txt"] }); }); </script>
<div class="file-loading"> <input id="input-43" name="input43[]" type="file" multiple> </div> <div id="errorBlock" class="help-block"></div> <script> $(document).ready(function() { $("#input-43").fileinput({ showPreview: false, allowedFileExtensions: ["jpg", "jpeg", "gif", "png"], elErrorContainer: "#errorBlock" }); }); </script>
maxFilePreviewSize
in KB (kilo bytes). This example sets the maximum preview file size to 10240 KB (10 MB)
. The default value for maxFilePreviewSize
if not set is 25600 KB (25 MB)
. <div class="file-loading"> <input id="input-44" name="input44[]" type="file" multiple> </div> <script> $(document).ready(function() { $("#input-44").fileinput({ uploadUrl: '/file-upload-batch/2', maxFilePreviewSize: 10240 }); }); </script>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.